<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打飞机</title>
    <style>
        #warp {
            width: 400px;
            height: 600px;
            border: 1px solid #000CCC;
            margin: 0 auto;
            position: relative;
            background: url("images/bg.jpg") no-repeat;
            background-size: 400px 600px;
        }
        #feiji {
            background: url("images/me.png");
            background-size: 40px 60px;
            position: absolute;
        }

        .ball {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #FF0000;
            position: absolute;
        }

        .enemy {
            width: 59px;
            height: 36px;
            position: absolute;
            background-size: 59px 36px;
        }
    </style>
</head>
<body>
<div id="warp">
    <div style="position: absolute;left: 0px;top: 0px;width: 360px;height: 40px;color: brown">目前已打飞机数量为:<span
            id="score">0</span>个
    </div>
    <div style="position: absolute;width: 20px;left: -20px; height: 200px;background-color: #0000FF;color:#FF0000;"
         id="show">
    </div>
    <div id="feiji" style="width: 40px;height: 60px; top: 540px;  left: 180px"></div>
</div>
</body>
<script type="text/javascript">
    var Feiji = document.getElementById("feiji");
    //飞机每次移动的距离
    var step = 10;
    //定义炮弹的速度
    var speed = 20;
    //监听键盘事件
    //获取游戏边界对象
    var warp = document.getElementById("warp");
    //定义一个放炮弹的数组
    var balls = [];
    //定义敌机数组
    var enemys = [];
    //碰撞了的敌机和子弹
    var crashEnemys = [];
    var status = true;

    document.body.onkeydown = function (e) {
        //left 37//right 39// up  38//down 40//空格 32
        var evt = e || window.event;
        switch (evt['keyCode']) {
            case 37:
                left();   //向左移动
                break;
            case 39:
                right();  //向右移动
                break;
            case 38:     //向上移动
                up();
                break;
            case 40:     //向下移动
                down();
                break;
            case  32:
                //shoot(); //发射炮弹
                break;
            default:
                break;
        }
    }
    //炮弹
    var e;
    function shoot() {
        var ball = document.createElement('div');
        ball.className = "ball";
        ball.style.left = parseInt(Feiji.style.left) + 20 - 5 + "px";
        ball.style.top = parseInt(Feiji.style.top) - 10 + "px";
        warp.appendChild(ball);
        balls[balls.length] = ball; //利用下标是0 变1的技巧
        var e = setTimeout(shoot, 300);
    }
    //构建敌机
    var b;
    function enemyPlan() {
        var num = Math.round(Math.random() * 3)//随机创造三个飞机
        for (var i = 0; i < num; i++) {
            var randomLeft = Math.round(Math.random() * 340);
            var ePlane = document.createElement("img");
            ePlane.className = "enemy";
            ePlane.src = "images/plain1.png";
            ePlane.style.left = randomLeft + "px";
            ePlane.style.top = 0 + "px";
            warp.appendChild(ePlane);
            enemys[enemys.length] = ePlane;
        }
        var b = setTimeout(enemyPlan, 500);
    }
    var a;
    //让敌机下落
    function enemyPlanDown() {
        for (var i in enemys) {
            enemys[i].style.top = parseInt(enemys[i].style.top) + speed + "px";
            if (parseInt(enemys[i].style.top) >= 600 - 36) {
                warp.removeChild(enemys[i]);
                enemys.splice(i, 1);
            }
            var feijiLeft = parseInt(Feiji.style.left);
            var feijiTop = parseInt(Feiji.style.top);
            var feijiWidth = Feiji.offsetWidth;
            var enemyLeft = parseInt(enemys[i].style.left);
            var enemyTop = parseInt(enemys[i].style.top);
            var enemyWidth = enemys[i].width;
            var enemyHeight = enemys[i].height;
            //移除敌机
            for (var k in crashEnemys) {
                if (enemys[i] == crashEnemys[k]) {
                    warp.removeChild(enemys[i]);
                    crashEnemys.slice(k, 1);
                    enemys.splice(i, 1);
                }
            }
            //判断敌机与本身的飞机发生碰撞的事件
            if (feijiLeft >= enemyLeft-feijiWidth && feijiLeft <= enemyLeft + enemyWidth && feijiTop <= enemyTop + enemyHeight && feijiTop >= enemyTop) {
                if (confirm("已经死亡，是否启动耍赖模式继续")) {
                } else {
                    alert("游戏结束,本次得分" + document.getElementById("score").innerHTML);
                    window.close();
                }
            }
        }
        a = setTimeout(enemyPlanDown, 500);
    }
    // 改变敌机的状态
    var c;
    function changeEnemy() {
        for (var i in enemys) {
            for (var k in crashEnemys) {
                if (crashEnemys[k] == enemys[i]) {
                    crashEnemys[k].src = "images/die1.png"
                }
            }
        }
        c = setTimeout(changeEnemy, 10);
    }
    //让炮弹动起来
    var d;
    function run() {
        for (var i in balls) {
            //让运行的炮弹top值 减去给定的值
            balls[i].style.top = parseInt(balls[i].style.top) - speed + "px";
            //球的上边界 到达
            if (parseInt(balls[i].style.top) <= 0) {
                warp.removeChild(balls[i]); //清楚内容
                balls.splice(i, 1);          //清除子弹列表
            }
            //判断是否与敌机发生了碰撞
            for (var k  in enemys) {
                var ballleft = parseInt(balls[i].style.left);
                var balltop = parseInt(balls[i].style.top);
                var enemyleft = parseInt(enemys[k].style.left);
                var enemytop = parseInt(enemys[k].style.top);
                if (ballleft >= enemyleft-balls[i].offsetWidth && ballleft <=enemyleft + enemys[k].width
                        && (balltop <= enemytop && balltop >= enemytop - enemys[k].height)) {
                    var score = parseInt(document.getElementById("score").innerHTML);
                    document.getElementById("score").innerHTML = score + 1;
                    //记录打中的飞机
                    crashEnemys[crashEnemys.length] = enemys[k];
                    if (score == 1) {
                        document.getElementById("show").innerHTML = "一血到手";
                    } else if (score == 10) {
                        document.getElementById("show").innerHTML = "已经干翻十个";
                    } else if (score == 50) {
                        document.getElementById("show").innerHTML = "准备进入暴走状态";
                    } else if (score > 100) {
                        document.getElementById("show").innerHTML = "超神中";
                    }
                }
            }
        }
        d = setTimeout(run, 100);// 递归 每隔一百毫秒执行一次
    }
    window.onload = function () {
        shoot();//子弹
        run();//子弹运行
        enemyPlan();//敌机
        enemyPlanDown();//敌机下落
        changeEnemy();//敌机状态的切换
    }
    //飞机向下移动
    function down() {
        // alert(Feiji.style.left) //如果没有style 可以讲属性用内部样式表处理 设置左边的距离即可
        var y = parseInt(Feiji.style.top);//获取飞机原来left的值
        y += step;//每次减去移动的距离
        if (y > 540) { //如果超出左边的边界 就停止移动
            return;//退出移动
        }
        Feiji.style.top = y + "px"; //重新赋值给飞机对象
    }
    //飞机向上移动
    function up() {
        // alert(Feiji.style.left) //如果没有style 可以讲属性用内部样式表处理 设置左边的距离即可
        var y = parseInt(Feiji.style.top);//获取飞机原来left的值
        y -= step;//每次减去移动的距离
        if (y < 0) { //如果超出左边的边界 就停止移动
            return;//退出移动
        }
        Feiji.style.top = y + "px"; //重新赋值给飞机对象
    }
    //飞机左边移动
    function left() {
        // alert(Feiji.style.left) //如果没有style 可以讲属性用内部样式表处理 设置左边的距离即可
        var x = parseInt(Feiji.style.left);//获取飞机原来left的值
        x -= step;//每次减去移动的距离
        if (x < -20) { //如果超出左边的边界 就停止移动
            return;//退出移动
        }
        Feiji.style.left = x + "px"; //重新赋值给飞机对象
    }
    //飞机向右移动
    function right() {
        // alert(Feiji.style.left) //如果没有style 可以讲属性用内部样式表处理 设置左边的距离即可
        var x = parseInt(Feiji.style.left);//获取飞机原来left的值
        x += step;//每次减去移动的距离
        if (x > 380) { //如果超出左边的边界 就停止移动
            return;//退出移动
        }
        Feiji.style.left = x + "px"; //重新赋值给飞机对象
    }
</script>
</html>